
@keyframes rotate {
  0% {
    /* transform: rotate(0deg); */
  }
  100% {
    transform: translateY(500px) rotate(180deg);
    opacity: 0;
  }
}
.tree {
  display: flex;
  flex-flow: row nowrap;
  height: 500px;
  width: 500px;
  margin: 100px calc(50% - 250px);
  position: relative;
  .Trunk {
    --trunk-height: 0;
    --trunk-times: 5px;
    --trunk-rotate: 3;
    flex: 0 0 auto;
    position: relative;
    height: calc(var(--trunk-height) * 10 * var(--trunk-times));
    max-height: 50%;
    width: calc(var(--trunk-height) * var(--trunk-times));
    max-width: var(--trunk-maxWidth);
    background-color: goldenrod;
    transform: rotate(calc(var(--trunk-rotate) * 1deg - 10deg));
    transform-origin: bottom center;
    position: absolute;
    left: max(calc(50% - var(--trunk-height) * var(--trunk-times) / 2), (calc(50% - var(--trunk-maxWidth) / 2)));
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    & > .Leaf {
      --leaf-height: 0;
      --leaf-times: 3px;
      --leaf-rotate: 3;
      position: absolute;
      height: calc(var(--leaf-height) * 10 * var(--leaf-times));
      width: var(--leaf-times);
      background-color: green;
      transform: rotate(calc(var(--leaf-rotate) * 1deg - 45deg));
      transform-origin: bottom center;
      position: absolute;
      top: calc(var(--leaf-height) * -10 * var(--leaf-times));
      left: 50%;
      &.falling {
        /* animation: rotate 2s linear; */
        transform: translateY(500px) rotate(calc(180deg - var(--trunk-rotate) * 1deg + 10deg));
        opacity: 0;
        transition: all 2s;
      }
    }
    &.root {
      bottom: 0;
    }
  }
  
  & > .Root {
    --root-height: 10;
    --root-width: 20;
    --root-radius: 50;
    --root-times: 3px;
    flex: 0 0 auto;
    height: calc(var(--root-height) * var(--root-times));
    width: calc(var(--root-width) * var(--root-times));
    max-width: 100%;
    border-top: 20px solid rgb(124, 72, 4);
    position: absolute;
    bottom: calc(var(--root-height) * -1 * var(--root-times));
    transform-origin: top center;
    &.left {
      border-top-left-radius: calc(50% + 1% * var(--root-radius));
      // left: calc(50% - var(--root-width) * var(--root-times));
      left: Clamp(-50%, 50% - var(--root-width) * var(--root-times), 50%);
    }
    &.right {
      border-top-right-radius: calc(50% + 1% * var(--root-radius));
      left: 50%;
    }
  }
}